<template>
	<div class="role" v-if="dialogFormVisible">
		<el-dialog :title="title" :visible="dialogFormVisible" :close-on-click-modal="false" width="800px" :before-close="handleClose">
			<div class="tab">
				<el-form ref="form" :rules="rules" :model="form" label-width="100px">
					<el-form-item label="被指派人:" prop="handler_id">
<!--						<el-input v-model="form.handler_id	" clearable placeholder="请输入被指派人"></el-input>-->
						<el-select v-model="form.handler_id" clearable filterable
								   style="width: 100%;"
								   placeholder="请选择被指派人">
							<el-option
								v-for="(item,index) in handlerList"
								:key="index"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="备注:" prop="remark">
						<el-input type="textarea" :rows="5" v-model="form.remark" placeholder="请输入备注"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="handleClose">取 消</el-button>
				<el-button type="primary" @click="add('form')">提 交</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>

import { bugAssign, roleOption } from '@/api/user'

export default {
	name: 'addForm',
	data(){
		return {
			title:'指派',
			dialogFormVisible:false,
			rules:{
				handler_id:{ required: true, message: '请输入被指派人', trigger: 'change' },
				remark:{required: true, message: '请输入备注', trigger: 'blur'}
			},
			form:{},
			id:'',
			handlerList:[]
		}
	},
	created() {

	},
	methods:{
		add(form){
			var data = {
				handler_id:this.form.handler_id,
				remark:this.form.remark,
			}
			this.$refs[form].validate((valid) => {
				if (valid) {
					bugAssign(data,this.id).then(res => {
						if(res.status == 'success'){
							this.$message.success(res.message)
							this.$parent.initTable()
						}else {
							this.$message.error(res.message)
						}
					})
					this.dialogFormVisible = false
					this.form = {}
				}
			})

		},
		handleClose(){
			this.dialogFormVisible = false
			this.form = {}
		},
		initData(data){
			this.id = data.id
			roleOption('test').then(res => {
				this.handlerList = res.data
			})
		}
	}

}
</script>

<style lang="scss" scoped>
.role{
	//.tab{
	//	width: 450px;
	//	margin: 0 0 0 40px;
	//}
}
</style>
